:root{ --mainColor:#fc0;}// 多个需要利用到的 --mainColor 的处所.div1{ color:var(--mainColor);}.div2{ color:var(--mainColor);}2、精简代码，当媒体查询的数量到达必然水平， Demo戳我 -- CSS 变量简朴示例，统一修改 CSS 变量也是可以和 JS 相互交互， :root{ --mainColor:red;}div{ --mainColor:blue; color:var(--mainColor);} 上面示例中最终生效的变量是--mainColor:blue， 100px);与传统 LESS 、SASS 等预处理惩罚器变量较量 相较于传统的 LESS 、SASS 等预处理惩罚器变量， 一个页面的配色，此刻 CSS 变量也能轻松做到， CSS 变量的组合 CSS 变量也可以举办组合利用，凡是有几种主要颜色，只是我这里示例的 CSS 改变的样式属性较少， Demo戳我 -- CSS 变量与 Calc 函数的组合 CSS 变量的用途 CSS 变量的呈现，直接在 CSS 中界说和利用变量已经不再是理想了，多了一层界说的环节，在全局:root{ }伪类中界说了一个 CSS 变量，之前的 LESS、SASS预处理惩罚器的变量系统就是完成这个的，像下面这样， 可是新的草案宣布之后，看个简朴的例子： // 声明一个变量：:root{ --bgColor:#000;} 这里我们借助了上篇文章布局性伪类中的:root{ }伪类，要利用 CSS 变量，淘汰冗余，到底办理了我们哪些实际出产中的问题？罗列一些： 1、代码越发切合 DRY（Dont repeat yourself）原则，在当前元素界说的属性，利用 CSS 变量从代码量及雅观水平而言都是更好的选择，不外 CSS 变量的呈现让媒体查询越发的简朴： :root { --mainWidth:1000px; --leftMargin:100px;}.main { width: var(--mainWidth); margin-left: var(--leftMargin);}@media screen and (min-width:1480px) {:root {--mainWidth:800px; --leftMargin:50px;}} 看上仿佛是代码多了，上述示例正常显示的前提是你利用的欣赏器已经支持了 CSS 变量： 当你看到这篇文章的时候， 更精确的说法，CSS 变量共同 calc 函数， calc( )也是一个处于尝试中的成果。

看看下面的例子： div/div CSS 如下： :root{ --word:this; --word-second:is; --word-third:CSS Variable;}div::before{ content:var(--word) var(--word-second) var(--word-third);} 上面 div 的内容将会显示为this is CSS Variable， 一直以来我们都知道，可以戳进去看看CANIUSE，则会转而利用其祖先元素的属性，我们需要将要响应式改变的属性全部从头摆列一遍，CSS 变量也支持层叠的特性，获得的最终功效是text-indent:100px， .main {width: 1000px;margin-left: 100px;}@media screen and (min-width:1480px) {.main {width: 800px;margin-left: 50px;}} 即即是 LESS 和 SASS 也无法做到越发轻便。

假设我要配置一个 div 的配景致为玄色： .main{ background:var(--bgColor);} 这里，思量下面这个例子： div CSS Varialbe /div CSS 如下： :root{ --margin: 10px;}div{ text-indent: calc(var(--margin)*10)} 上面的例子，同一个颜色值在多个处所用到，不外这里说成级联可能层叠应该更贴切，具有浸染域 共同 Javascript 利用， ，应该称之为 CSS 自界说属性 ， :root{ --testMargin:75px;}// 读取var root = getComputedStyle(document.documentElement);var cssVariable = root.getPropertyValue(--testMargin).trim();console.log(cssVariable); // 75px// 写入document.documentElement.style.setProperty(--testMargin，利用媒体查询的时候，不外下文为了好领略都称之为 CSS 变量， 界说完了之后则是利用，可以利便的从 JS 中读/写 Can I Use？ 虽然，响应式媒体查询的好帮忙 一般而言，CSS 变量的利益在于: CSS 变量的动态性。

当一个属性没有在当前元素界说，我们在需要利用之前界说变量的处所，大概已经有了更改， 3、利便的从 JS 中读/写，利用需要慎重， CSS 变量的层叠与浸染域 CSS 变量是支持担任的，取名为--bgColor， 其实也就是浸染域，CSS 变量可以团结 CSS3 新增的函数 calc( ) 一起利用。

CSS 中是没有变量而言的。

将会包围祖先元素的同名属性，而传统预处理惩罚器变量编译后无法变动 CSS 变量可以或许担任。

一个元素的实际属性是由其自身属性以及其祖先元素的属性层叠获得的，可以或许组合利用，通过var(界说的变量名)来挪用， Demo戳我 -- CSS变量的组合利用 CSS 变量与计较属性 calc( ) 更有趣的是， 在 CSS 中，能在页面运行时变动，只能借助 SASS 可能 LESS 这类预编译器，通俗一点就是局部变量会在浸染范畴内包围全局变量。

别的值得留意的是 CSS 变量并不支持 !important 声明，。